const LanguagePanelConfig = {
	ITEM_CLASS: 'language-item',
	LIST: 'language-list',
	ITEM_LABEL: 'language-name',
	ITEM_FLAG: 'language-flag'
}

class LanguagePanel {
	constructor(options = {}) {
		this.languages = options.data;
		this.currentLanguage = options.defaultLanguage || 'zh';
		this.onLanguageChange = options.onLanguageChange || (() => {});
		this.panel = null;
		this.languageList = null;
		this.createPanel();
		this.addStyles();
		this.initEvents();
	}

	createPanel() {
		// 创建语言列表
		this.languageList = document.createElement('div');
		this.languageList.className = LanguagePanelConfig.LIST;

		// 生成语言项 
		this.languages.forEach(e => {
			const item = this.generateItem(e);
			this.languageList.appendChild(item);
		});

		this.initBottomPanel(this.languageList.innerHTML);
	}

	initBottomPanel(content) {
		this.panel = new BottomPanel({
			title: '请选择',
			content: content,
			footer: '',
			triggerSelector: '',
			onOpen: () => console.log('面板打开了'),
			onClose: () => console.log('面板关闭了')
		});
	}

	generateItem(e) {
		const item = document.createElement('div');
		item.className = `${LanguagePanelConfig.ITEM_CLASS} ${e.code === this.currentLanguage ? 'active' : ''}`;
		item.dataset.index = e.code;
		item.innerHTML =
			`<img src="${e.flag}" alt="${e.name}国旗" class="${LanguagePanelConfig.ITEM_FLAG}"> 
			<span class="${LanguagePanelConfig.ITEM_LABEL}">${e.name}</span>`;
		return item;
	}

	initEvents() {
		// 在document.body上设置委托
		document.body.addEventListener('click', (e) => {
			const target = e.target.closest(`.${LanguagePanelConfig.ITEM_CLASS}`);
			if (target) {
				const index = target.dataset.index;
				this.setLanguage(index);
			}
		});
	}

	open() {
		this.panel.open()
	}

	close() {
		this.panel.close()
	}

	setLanguage(langCode) {
		if (!this.languages.some(lang => lang.code === langCode)) {
			console.error('Invalid language code:', langCode);
			return;
		}
		this.currentLanguage = langCode;
		// 更新选中状态 
		document.body.querySelectorAll(`.${LanguagePanelConfig.ITEM_CLASS}`).forEach(item => {
			item.classList.toggle('active', item.dataset.index === langCode);
		});

		// 触发回调
		this.onLanguageChange(langCode);
		// // 存储到localStorage
		localStorage.setItem('appLanguage', langCode);
		this.close();
	}

	addStyles() {
		this.styleElement = document.createElement('style');
		this.styleElement.textContent = `
		  .${LanguagePanelConfig.LIST} {
		  	display: flex;
		  	flex-direction: column;
		  	gap: var(--gap);
		  }
		  
		  .${LanguagePanelConfig.ITEM_CLASS} {
		  	display: flex;
		  	align-items: center;
		  	padding: var(--gap);
		  	border-radius: var(--com-border-radius);
		  	transition: background 0.2s;
		  	cursor: pointer;
		  	position: relative;
		  }
		  
		  .${LanguagePanelConfig.ITEM_CLASS}.active {
		  	background: var(--primary);
		  	color: var(--white);
		  }
		  
		  .${LanguagePanelConfig.ITEM_CLASS}.active::after{
		  	content: "\\2713";
		  	position: absolute;
		  	top: 30%;
		  	right: var(--gap);
		  	width: 20px;
		  	height: 20px;
		  	line-height: 20px;
		  	border-radius: 50%;
		  	background: var(--white);
		  	z-index: 10;
		  	color: var(--primary);
		  	text-align: center;
		  }
		  
		  .${LanguagePanelConfig.ITEM_FLAG} {
		  	width: 24px;
		  	height: 16px;
		  	margin-right: var(--gap);
		  	border-radius: 2px;
		  	object-fit: cover;
		  }
		`;
		document.head.appendChild(this.styleElement);
	}
}
